{extends file="../home.html"}
{block name="title"}{$head_title}{/block}

{block name="css"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/refresh_load.css?version={$version}"/>
<link href="__PUBLIC__/Css/front/css/xuanshang_lz.css?version={$version}" type="text/css" rel="stylesheet">
<style type="text/css">
body{
	/*background: #F3F3F3;*/
}
/*全屏查看器样式*/
.fullscreen{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10000;
	background-color: #000;
	display: none;
}
.fullscreen .fullscreen_slide{
	background-color: #000;
}
</style>
{/block}
{block name="content"}

	
<div class="com_header">
	<a href="javascript:;" class="go_back"><i class="icon_back"></i></a>悬赏贴<span class="louzhu">只看楼主</span>
</div>

<div id="load_wrapper" style="margin-top: 2.2rem;margin-bottom: 2.5rem">
	<div id="scroller">
		<div id="pullDown">
		    <span class="pullDownIcon"></span>
		</div>

	<div class="user_header clearfix" >
		 <a href="javascript:;" class="avatar">
		 	<img src="/Public/Images/img/icon-hone-chou-50@3x.png" alt="">
		 </a>
		 <div class="user_main clearfix">
		 	<span class="nickname">花花世界</span>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 	<i class="tag">女神认定</i>
		 </div>
		 <p>06-15<span class="type">众筹频道</span></p>
	</div>
	<div class="post_content">
		<h2>世界很美，而你刚好有空</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae unde dicta facilis porro distinctio quaerat incidunt et mollitia dolorum laborum. Beatae, possimus voluptatem a? Debitis consequuntur corporis, reprehenderit sint assumenda!</p>
		<div class="post_img">
			<img src="/Public/Images/img/Mask@3x.png" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png" alt="">
			<img src="/Public/Images/img/Mask@3x.png" alt="" data-row="2"  data-img="/Public/Images/img/Mask@3x.png" alt="">
						
		</div>
	</div>



	<div class="xuanshang">
		<h4>悬赏价：¥10</h4>
		<p>满足：<strong>8人</strong></p>
		<!-- <a href="javascript:;" class="tui_btn">申请退款</a> -->
		<!-- 悬赏成功的状态 -->
		<a href="javascript:;" class="xs_btn">悬赏成功</a>
	</div>



	<!-- 用户满足答案（0） -->
	<div class="da_comment">
		<h5 class="comment_title">用户满足答案（0）</h5>
		<!-- 列表 -->
		<div class="da_list">
			<div class="da_one">
				<a href="javascript:;"><img src="/Public/Images/img/Mask@3x.png" alt="" class="avatar"></a>
				<div class="da_main">
					<h3 class="nickname">人间四月<span class="caina_btn">已采纳!</span><i class="icon_best"></i></h3>
					<p class="time"><span>1楼</span><span>22:58</span></p>
					<p class="text">楼主，我能不能满足你呢？</p>
				</div>
				<ul class="imgbox clearfix">
					<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
					<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="2"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
					<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="3"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
				</ul>
			</div>
			<div class="da_one">
				<a href="javascript:;"><img src="/Public/Images/img/Mask@3x.png" alt="" class="avatar"></a>
				<div class="da_main">
					<h3 class="nickname">人间四月 <span class="caina">采纳答案</span></h3>
					<p class="time"><span>1楼</span><span>22:58</span></p>
					<p class="text">楼主，我能不能满足你呢？</p>
				</div>
				<ul class="imgbox clearfix">
					<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
					<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="2"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
					<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="3"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
				</ul>
			</div>
		</div>
		<!-- 没答案 -->
		<!-- <div class="no_da">
			还没有人给出满足答案呢～
		</div> -->
	</div>

	<!-- 用户评论 -->
	<div class="user_comment">
		<h5 class="comment_title">用户评论（2）</h5>
		<!-- 有评论 -->
		<div class="comment_list">
			<div class="comment_item">
				<div class="comment_top">
					<a href="javascript:;" class="avatar">
						<img src="/Public/Images/img/Mask@3x.png" alt="">
						<!-- <span class="lz_tag">楼主</span> -->
						<span class="jd_tag">鉴定师</span>
					</a>
					<div class="comment_user">
						<div class="user_info">
							<span class="nickname">天生偏执狂</span>
							<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i>
						 	<i class="tag">女神认定</i> 
						</div>
						<div class="other clearfix">
							<span class="floor">2楼</span>
							<span class="time">22:58</span>
							<span class="zan_num">10</span>
							<i class="icon_zan"></i>
							<i class="icon_pl"></i>
						</div>
						<div class="text">
							我还能说什么，我也很无奈啊。
						</div>
						<ul class="item_imgs clearfix">
							<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="1"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
							<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="2"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
							<li><img src="/Public/Images/img/Mask@3x.png" class="img" alt="" data-row="3"  data-img="/Public/Images/img/Mask@3x.png" alt=""></li>
						</ul>
					</div>
				</div>
				
				<div class="comment_cont">
					<ul>
						<li><span class="nick">老奶奶都不服就服你：</span>                           我能怎么办，当然是选择原来他啦</li>
					</ul>
				</div>
			</div>

		</div>
		<!-- 无评论显示 -->
		<!-- <div class="no_comment">
			快来说点什么吧～
		</div> -->
	</div>

		<div id="pullUp">
			<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载...</span>
		</div>
	</div>
</div>

<!-- 固定底部 -->
<div class="fixed_footer">
	<div class="input">
		我也来说一句…
	</div>
	<i class="zan"></i>
	<i class="coll"></i>
	<i class="share"></i>
</div>
<!-- 申请退款 -->
<div class="dialog">
	<div class="mask"></div>
	<div class="dialog_content">
		<div class="dialog_content_hd">
			<h4>选择退款原因</h4>
		</div>
		<div class="dialog_content_bd">
			<div class="dialog_row clearfix">
				<span>没有满意答案</span><i class="icon_nochoose"></i>
			</div>
			<div class="dialog_row clearfix">
				<span>手抖发错了</span><i class="icon_nochoose"></i>
			</div>
		</div>
		<div class="dialog_content_ft">
			<a href="javascript:;" class="tijiao">提交</a>
		</div>
		<!-- 关闭 -->
		<div class="btn_close"></div>
	</div>
</div>
<!-- 全屏图片查看器-->
<div class="swiper-container fullscreen" id="fullscreen">
	<div class="swiper-wrapper" id="swiper_wrapper">
	</div>
</div>


{/block}
{block name="js"}

{literal}
<script type="text/javascript" src="__PUBLIC__/Js/front/iscroll.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/js/zanshan_lz.js"></script>	
<script>
	var total = 1;
    var firstRow = 1;

	$(function(){
		//只看楼主
		$('.louzhu').on('click',function(){
			$(this).toggleClass('active');
		})
		//退款切换
		$('.dialog_row').on('click',function(){
			$(this).addClass('active').siblings().removeClass('active');
		})
		// 关闭退款
		$('.btn_close').on('click',function(){
			$('.dialog').hide();
		})
		//评论点赞
		$('.icon_zan').on('click',function(){
			$(this).toggleClass('hover');
			if($(this).hasClass('hover')){
				var zan_num = parseInt($(this).parent().find('.zan_num').html())+1;
				$(this).parent().find('.zan_num').html(zan_num);
			}else{
				var zan_num = parseInt($(this).parent().find('.zan_num').html())-1;
				$(this).parent().find('.zan_num').html(zan_num);
			}
		})
		//图片正方形
		var liw = $('.imgbox li').width();
		$('.imgbox li').height(liw);

		//底部点赞和收藏
		$('.zan').on('click',function(){
			$(this).toggleClass('active');
		})
		$('.coll').on('click',function(){
			$(this).toggleClass('active');
		})

		//退款
		$('.tui_btn').on('click',function(){
			$('.dialog').show();
		})

		//图片正方形
		var liw = $('.item_imgs li').width();
		$('.item_imgs li').height(liw);

				//全屏查看1
		$(function(){
			$(document).on('click', '.post_img img', function(event){
				event.preventDefault();
				var row = $(this).data('row');
				var img_urls = [];
				$(this).parent().find('img').each(function() {        
				    img_urls.push($(this).data("img"));
				});
				var html = '';
				for(i=0;i<img_urls.length;i++){
					html += '<div class="swiper-slide fullscreen_slide"><img src="'+img_urls[i]+'"/></div>';
				}
				$('#swiper_wrapper').empty().append(html);
				console.log(img_urls);
				$('#fullscreen').show();
				var full_swiper = new Swiper('.fullscreen',{
				    //pagination : '.full_pagination',
				});
				full_swiper.slideTo(row, 0, false);
				
			});
			// 关闭查看器
			$('#fullscreen').on('click', function(event) {
				event.preventDefault();
				$(this).hide();
			});
		})
		//全屏查看2
		$(function(){
			$(document).on('click', '.img', function(event){
				event.preventDefault();
				var row = $(this).data('row');
				var img_urls = [];
				$(this).parent().parent().find('.img').each(function() {        
				    img_urls.push($(this).data("img"));
				});
				var html = '';
				for(i=0;i<img_urls.length;i++){
					html += '<div class="swiper-slide fullscreen_slide"><img src="'+img_urls[i]+'"/></div>';
				}
				$('#swiper_wrapper').empty().append(html);
				console.log(img_urls);
				$('#fullscreen').show();
				var full_swiper = new Swiper('.fullscreen',{
				    //pagination : '.full_pagination',
				});
				full_swiper.slideTo(row, 0, false);
				
			});
			// 关闭查看器
			$('#fullscreen').on('click', function(event) {
				event.preventDefault();
				$(this).hide();
			});
		})
	})
</script>
{/literal}
{/block}